<template>
  <view>
    <l-background :color="color" />
    <view class="padding-30">
      <summary-card padding="0" box-shadow="none" title="结算中(元)" :info="billInfo" :total-amount="inProgress" />
      <view class="padding-top-10">
        <template v-if="hasData">
          <view v-for="(val,key) in list" :key="key" class="card relative margin-top-30">
            <view class="title flex-row flex-center">
              <text class="text-32 color-t1">{{ key }}年</text>
            </view>
            <view>
              <tui-list-cell v-for="(item,index) in val" :key="index" arrow @click="toDetail(item)">
                <view class="item flex-row align-center justify-between">
                  <view class="flex-row align-center">
                    <text class="text-28" :class="['color-t' + (item.status === 4 ? 3 : 1)]">{{ item.name }}</text>
                    <text class="text-28" :class="['color-t' + (item.status === 4 ? 3 : 1)]" style="margin-left:66rpx;">{{ item.settleAmount.toFixed(2) }}</text>
                  </view>
                  <text class="text-28" :style="{color:status(item.status).color}">{{ status(item.status).label }}</text>
                </view>
              </tui-list-cell>
            </view>
            <view class="line">
              <view class="circle left" />
              <view class="circle right" />
            </view>
          </view>
          <l-footer :has-more="hasMore" :background-color="color" />
        </template>
        <template v-else>
          <tui-skeleton v-if="showSkeleton" is-loading />
          <l-no-data v-else text="暂无数据" type="data" />
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import colors from '@/common/colors'
import { mapGetters } from 'vuex'
import { getVehicleCompanyBillList, getSumCompanyBill } from '../api'
import { billStatus } from '../index'
export default {
  name: 'BillManagement',
  data() {
    return {
      inProgress: 0,
      billInfo: [
        { label: '待确认(元)', value: 0, fixed: true },
        { label: '已结算(元)', value: 0, fixed: true }
      ],
      current: 1,
      pageSize: 10,
      hasMore: true,
      showSkeleton: true,
      list: {},
      color: colors.colorSecondary
    }
  },
  computed: {
    status() {
      return (status) => {
        for (let i = 0; i < billStatus.length; i++) {
          const item = billStatus[i]
          if (item.value === status) return item
        }
        return {
          label: '-',
          color: colors.fontcolorT3
        }
      }
    },
    hasData() {
      for (const key in this.list) {
        return true
      }
      return false
    },
    ...mapGetters({
      auth: 'auth'
    })
  },
  created() {
    this.reload()
  },
  onPullDownRefresh() {
    this.reload()
  },
  onReachBottom() {
    this.nextPage()
  },
  methods: {
    async getList() {
      const [err, res] = await getVehicleCompanyBillList({
        current: this.current,
        limit: this.pageSize
      })
      this.showSkeleton = false
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!list) list = []

      if (list.length < this.pageSize) this.hasMore = false

      let obj
      if (this.current === 1) obj = { }
      else obj = this.copyData(this.list)

      list.forEach(item => {
        const key = item.startDate.substr(0, 4)
        if (obj[key]) {
          obj[key].push(item)
        } else {
          obj[key] = [item]
        }
      })
      this.list = this.copyData(obj)
      obj = null
    },
    async getSumCompanyBill() {
      const [err, res] = await getSumCompanyBill()
      if (!this.$http.errorCheck(err, res)) return false
      const data = res.data.data
      if (data) {
        this.inProgress = data.inProgress
        this.billInfo[0].value = data.confirmed
        this.billInfo[1].value = data.settled
      }
    },
    reload() {
      this.hasMore = true
      this.current = 1
      this.getList()
      this.getSumCompanyBill()
    },
    nextPage() {
      if (this.hasMore) {
        this.current++
        this.getList()
      }
    },
    toDetail(item) {
      if (!this.auth.includes('bill_view_details')) {
        this.toast('暂无权限')
        return
      }
      this.jump('/user/bill-detail/bill-detail?id=' + item.id)
    }
  }
}
</script>

<style scoped lang="scss">
@import "../index";
</style>
